<template>
    <el-main>
        <el-main class="ep-body">
            <epl-top-bar :datas="{formData:form}" showPerson psTagType="PERSON_PENSION_QUERY" personType="PERSON_ALL_EXACT">
            </epl-top-bar>
            <epl-userMessage dataType="person" idCount = "3">
                <template slot-scope="scope">
                    <epl-userMessageItem title="当前待遇" :sum="form.sum.value">
                        <epl-column label="补扣发总月数" :value="form.calmonth.value"></epl-column>
                        <epl-column label="补扣发总金额" :value="'￥'+form.calmoney.value"></epl-column>
                    </epl-userMessageItem>
                </template>
            </epl-userMessage>
            <el-card class="ep-card">
                <el-form :model="form" ref="form" :rules="rules">
                    <el-row :gutter="10" v-show="false">
                        <ep-input colspan="8" label="sum" name="sum" :property="form.sum"
                                  p="D" :datas="{pageData:form}"></ep-input>

                        <ep-title>待遇发放方式</ep-title>
                        <ep-select colspan="8" label="领取人证件类型" name="aac059" :property="form.aac059"
                                   p="D" codetype="AAC059"
                                   :datas="{pageData:form}"></ep-select>
                        <ep-input colspan="8" label="领取人证件号码" name="aae136" :property="form.aae136"
                                  p="D" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="领取人姓名" name="aae133" :property="form.aae133"
                                  p="D" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <el-row :gutter="10" v-show="false">
                        <ep-select colspan="8" label="待遇发放方式" name="aae145" :property="form.aae145"
                                   p="D" :datas="{pageData:form}" codetype="AAE145"></ep-select>
                        <ep-input colspan="8" label="地址" name="aae006" :property="form.aae006"
                                  p="D" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="邮政编码" name="aae007" :property="form.aae007"
                                  p="D" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <ep-title>请输入待遇终止信息</ep-title>
                    <el-row :gutter="10">
                        <ep-input colspan="8" label="移交社区综合性补贴待追回金额" name="yjsq" placeholder="请输入移交社区综合性补贴待追回金额" :property="form.yjsq"
                                  p="R"
                                  :datas="{pageData:form}"></ep-input>
                        <ep-select colspan="8" label="终止原因" name="aae160" placeholder="请选择终止原因" :property="form.aae160"
                                   p="R" :datas="{pageData:form}" codetype="AAE160" ></ep-select>
                        <ep-date colspan="8" label="终止年月" name="aae041" placeholder="请选择终止年月" :property="form.aae041"
                                 p="R" :datas="{pageData:form}" format="yyyyMM"></ep-date>
                    </el-row>
                    <ep-title>请输入一次性待遇发放信息</ep-title>
                    <el-row :gutter="10">
                        <ep-input colspan="8" label="领取人关系" placeholder="请输入领取人关系" name="aac223" :property="form.aac223"
                                  p="R"
                                  :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="领取人姓名" placeholder="请输入领取人姓名" name="aae133" :property="form.aae133"
                                  p="R" :datas="{pageData:form}"></ep-input>
                        <ep-select colspan="8" label="领取人证件类型" name="aac059" placeholder="请选择领取人证件类型" :property="form.aac059"
                                   p="R" :datas="{pageData:form}" codetype="AAC059" ></ep-select>
                    </el-row>
                    <el-row :gutter="10">
                        <ep-input colspan="8" label="领取人证件号码" placeholder="请输入领取人证件号码" name="aae136" :property="form.aae136"
                                  p="R" :datas="{pageData:form}"></ep-input>
                        <ep-select colspan="8" label="发放方式" name="aae145" placeholder="请选择发放方式" :property="form.aae145"
                                   p="R" :datas="{pageData:form}" codetype="AAE145" ></ep-select>
                        <ep-select colspan="8" label="发放银行" name="aaz065" :property="form.aaz065" placeholder="请选择发放银行"
                                   p="R" :datas="{formData: form}" codetype="AAZ065" rules="this.$rules.test_noBlank"></ep-select>
                    </el-row>

                    <el-row :gutter="10">
                        <ep-input colspan="8" label="银行账号" name="aae010" :property="form.aae010" placeholder="请输入银行账号"
                                  p="R" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="银行开户名" name="aae009" :property="form.aae009" placeholder="请输入银行开户名"
                                  p="R" :datas="{pageData:form}"></ep-input>
                        <epl-search-bank colspan="8" label="新开户行行号" name="aaf002" :property="form.aaf002" placeholder="请选择新开户行行号"
                                         p="R" :datas="{formData: form}" codetype="AAZ065" bankName="aaz065" show rules="this.$rules.test_noBlank"></epl-search-bank>
                    </el-row>
                    <el-row :gutter="10">
                        <ep-input colspan="16" label="开户行名称" name="bac049" :property="form.bac049" placeholder="请输入开户行名称"
                                  p="R" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="邮政编码" name="aae007" :property="form.aae007"  placeholder="请输入邮政编码"
                                  p="R" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <el-row :gutter="10">
                        <ep-input colspan="16" label="联系地址" name="aae006" :property="form.aae006" placeholder="请输入联系地址"
                                  p="R" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <ep-title>待遇汇总信息</ep-title>
                    <el-row :gutter="10">
                        <ep-input colspan="8" label="待遇补扣发类型" v-show="false" name="aaa077" :property="form.aaa077"
                                   p="D" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="补扣发开始年月" name="bac061" format="yyyyMM" :property="form.bac061"
                                 p="D" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="补扣发结束年月" name="aae042" format="yyyyMM" :property="form.aae042"
                                 p="D" :datas="{pageData:form}"></ep-input>
                        <ep-input colspan="8" label="补扣发总月数" name="calmonth" :property="form.calmonth"
                                  p="D" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <el-row :gutter="10">
                        <ep-input colspan="8" label="补扣发总金额" name="calmoney" :property="form.calmoney"
                                  p="D" :datas="{pageData:form}"></ep-input>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <ep-button id="cal" api="doQuery" type="primary" top="20" bottom="20"
                                   :datas="{formData: form,tableData1:tableData1,tableData2:tableData2,tableData3:tableData3,panel:panel}"
                                   name="计算"></ep-button>
                        <ep-saveButton id="doSave" type="primary" top="20" bottom="20" ref="save" @formValidate="formValidate"
                                       :validate="['form']"
                                       :datas="{formData: form,panel:panel,tableData1:tableData1}"></ep-saveButton>
                    </el-row>
                </el-form>
                <el-tabs v-model="activeName2" type="card">
                    <el-tab-pane label="一次性待遇明细"  name="1">
                        <ep-table :data="tableData1" edited="true" :pager="20">
                            <ep-table-column editor="text" name="aac001" header="人员ID"></ep-table-column>
                            <ep-table-column editor="text" name="aaa036" header="待遇项目"></ep-table-column>
                            <ep-table-column editor="text" name="aaa037" header="待遇项目名称"></ep-table-column>
                            <ep-table-column editor="text" name="aae003" header="对应费款所属期"></ep-table-column>
                            <ep-table-column editor="text" name="calmoney" header="核发金额"></ep-table-column>
                            <ep-table-column editor="text" name="aae140" header="险种类型"></ep-table-column>
                            <!--隐藏的列-->
                            <ep-table-column editor="text" width="30" name="aae041" header="停发开始年月" v-if="false"
                            ></ep-table-column>
                            <ep-table-column editor="text" width="30" name="aab301" header="行政区划代码"  v-if="false"
                            ></ep-table-column>
                            <ep-table-column editor="text" width="30" name="aaa027" header="统筹区编码" v-if="false"
                            ></ep-table-column>
                        </ep-table>
                    </el-tab-pane>
                    <el-tab-pane label="待遇扣发明细" name="2">
                        <ep-table :data="tableData2" :pager="20">
                            <ep-table-column editor="text" name="aac001" header="人员ID"></ep-table-column>
                            <ep-table-column editor="text" name="aaa036" header="待遇项目"></ep-table-column>
                            <ep-table-column editor="text" name="aaa037" header="待遇项目名称"></ep-table-column>
                            <ep-table-column editor="text" name="aaa078" header="补扣标志"></ep-table-column>
                            <ep-table-column editor="text" name="aae003" header="对应所属期"></ep-table-column>
                            <ep-table-column editor="text" name="aae002" header="费款所属期"></ep-table-column>
                            <ep-table-column editor="text" name="aae019" header="金额"></ep-table-column>
                            <ep-table-column editor="text" name="calmoney" header="核发金额"></ep-table-column>
                            <ep-table-column editor="text" name="aae140" header="险种类型"></ep-table-column>
                        </ep-table>
                    </el-tab-pane>
                    <el-tab-pane label="定期待遇明细" name="3">
                        <ep-table :data="tableData3" :pager="20">
                            <ep-table-column editor="text" name="aaa036" header="待遇项目"></ep-table-column>
                            <ep-table-column editor="text" name="aaa037" header="待遇项目名称"></ep-table-column>
                            <ep-table-column editor="text"  name="aae041" header="扣发开始年月"></ep-table-column>
                            <ep-table-column editor="text" name="aae019" header="金额"></ep-table-column>
                            <ep-table-column editor="text" header="扣发月份" name="bac062"></ep-table-column>
                            <ep-table-column editor="text" header="扣发金额" name="bac063"></ep-table-column>
                        </ep-table>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-main>
    </el-main>
</template>
<script type="es6">
    export default {
        data() {
            return {
                form:{
                    sum: {
                        value: '',
                        p: 'D'
                    },
                    aac059: {
                        key: '',
                        value: '',
                        p: 'D'
                    },
                    aae136: {
                        value: '',
                        p: 'D'
                    },
                    aae133: {
                        value: '',
                        p: 'D'
                    },
                    aae145: {
                        key: '',
                        value: '',
                        p: 'D'
                    },
                    aae006: {
                        value: '',
                        p: 'D'
                    },
                    aae007: {
                        value: '',
                        p: 'D'
                    },
                    yjsq: {
                        value: '',
                        p: 'R'
                    },
                    aae160: {
                        key: '',
                        value: '',
                        p: 'R'
                    },
                    aae041: {
                        value: '',
                        p: 'R'
                    },
                    aac223: {
                        value: '',
                        p: 'R'
                    },
                    aae133: {
                        value: '',
                        p: 'R'
                    },
                    aac059: {
                        key: '',
                        value: '',
                        p: 'R'
                    },
                    aae136: {
                        value: '',
                        p: 'R'
                    },
                    aae145: {
                        key: '',
                        value: '',
                        p: 'R'
                    },
                    aaz065: {
                        key: '',
                        value: '',
                        p: 'R'
                    },
                    aae010: {
                        value: '',
                        p: 'R'
                    },
                    aae009: {
                        value: '',
                        p: 'R'
                    },
                    aaf002: {
                        value: '',
                        p: 'R'
                    },
                    bac049: {
                        value: '',
                        p: 'R'
                    },
                    aae007: {
                        value: '',
                        p: 'R'
                    },
                    aae006: {
                        value: '',
                        p: 'R'
                    },
                    aaa077: {
                        value: '',
                        p: 'D'
                    },
                    bac061: {
                        value: '',
                        p: 'D'
                    },
                    aae042: {
                        value: '',
                        p: 'D'
                    },
                    calmonth: {
                        value: '',
                        p: 'D'
                    },
                    calmoney: {
                        value: '',
                        p: 'D'
                    },

                },
                activeName2: '1',
                tableData1: {},
                tableData2: {},
                tableData3: {},
                panel: {},

                rules:{
                    yjsq: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae160: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae041: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aac223: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae133: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aac059: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae136: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae145: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aaz065: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae010: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae009: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aaf002: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    bac049: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae007: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],
                    aae006: [
                        {required: true, validator: this.$rules.test_noBlank, trigger: 'blur'}

                    ],

                },
                codeTypes:{
                    AAC059:[],
                    AAE145:[],
                    AAE160:[],
                    AAZ065:[],

                },
                codeTypeFilters:{

                },
                pager: {
                    page: 1,
                    size: 10
                },
                total: 0,
            }
        },
        computed: {
            functionId() {
                if (this.$store.getters.init.path !== this.$route.path) return;
                if (this.$store.getters.init.mdParam === null || this.$store.getters.init.mdParam === undefined) return;
                if (this.$store.getters.init.mdParam.functionid === undefined) return;
                return this.$store.getters.init.mdParam.functionid;
            },
            backFun() {
                return this.$store.getters.backFun;
            },
            init_formData() {
                if (this.$store.getters.init.path !== this.$route.path)  return;
                return this.$store.getters.init.form;
            },
            doInitformData: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    if (this.$store.getters.common.path !== this.$route.path) return;
                    return this.$store.getters.common.formData;
                },
                set: function (newValue) {
                    if (newValue.path !== this.$route.path) return;
                    return newValue;
                }
            },
            init_panel() {
                if (this.$store.getters.init.path !== this.$route.path)  return;
                return this.$store.getters.init.panel;
            },
            doInitpanel: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    if (this.$store.getters.common.path !== this.$route.path) return;
                    return this.$store.getters.common.panel;
                },
                set: function (newValue) {
                    if (newValue.path !== this.$route.path) return;
                    return newValue;
                }
            },
            init_tableData1() {
                return this.$store.getters.init.tableData1;
            },
            doInittableData1: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    if (this.$store.getters.common.path !== this.$route.path) return;
                    return this.$store.getters.common.tableData1;
                },
                set: function (newValue) {
                    if (newValue.path !== this.$route.path) return;
                    return newValue;
                }
            },
            init_tableData2() {
                return this.$store.getters.init.tableData2;
            },
            doInittableData2: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    if (this.$store.getters.common.path !== this.$route.path) return;
                    return this.$store.getters.common.tableData2;
                },
                set: function (newValue) {
                    if (newValue.path !== this.$route.path) return;
                    return newValue;
                }
            },
            init_tableData3() {
                return this.$store.getters.init.tableData3;
            },
            doInittableData3: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    if (this.$store.getters.common.path !== this.$route.path) return;
                    return this.$store.getters.common.tableData3;
                },
                set: function (newValue) {
                    if (newValue.path !== this.$route.path) return;
                    return newValue;
                }
            },
            false() {
                if (this.$store.getters.common === null) return [];
                return this.$store.getters.common.false;
            },
            false() {
                if (this.$store.getters.common === null) return [];
                return this.$store.getters.common.false;
            },
            false() {
                if (this.$store.getters.common === null) return [];
                return this.$store.getters.common.false;
            },

        },
        created() {
            let param = {
                path: this.$route.path,
                codeTypes:this.codeTypes,
                codeTypeFilters: window.btoa(JSON.stringify(this.codeTypeFilters)),
                form:this.form,
                tableData1:this.tableData1,
                tableData2:this.tableData2,
                tableData3:this.tableData3,
                panel:this.panel

            };
            if (this.$route.query.keepAlive === undefined) {
                this.$store.dispatch('SET_INIT', param);
            }
        },
        watch: {
            init_formData: {
                handler(value) {
                    if (value == undefined) return;
                    this.getformData(value);
                },
                deep: true
            },
            doInitformData: {
                handler(value) {
                    if (value == undefined) return;
                    this.getformData(value);
                },
                deep: true
            },
            doInittableData1: {
                handler(value) {
                    if (value == undefined) return;
                    this.gettableData1(value);
                },
                deep: true
            },
            doInittableData2: {
                handler(value) {
                    if (value == undefined) return;
                    this.gettableData2(value);
                },
                deep: true
            },
            doInittableData3: {
                handler(value) {
                    if (value == undefined) return;
                    this.gettableData3(value);
                },
                deep: true
            },
            init_panel: {
                handler(value) {
                    if (value == undefined) return;
                    this.getpanel(value);
                },
                deep: true
            },
            doInitpanel: {
                handler(value) {
                    if (value == undefined) return;
                    this.getpanel(value);
                },
                deep: true
            },
            false: {
                handler(value) {
                    if (value == undefined) return false;
                    return value;
                },
                deep: true
            },
            false: {
                handler(value) {
                    if (value == undefined) return false;
                    return value;
                },
                deep: true
            },
            false: {
                handler(value) {
                    if (value == undefined) return false;
                    return value;
                },
                deep: true
            },

            backFun: {
                handler(value) {
                    if (value === null) return;
                    this.customBackFun();
                    let backFun = [];
                    backFun = value.split(',');
                    if (backFun.indexOf('rDoInit') >= 0) {
                        let codeTypes = {
                            AAC059:[],
                            AAE145:[],
                            AAE160:[],
                            AAZ065:[],

                        };
                        let form = {
                            sum: {
                                value: '',
                                p: 'D'
                            },
                            aac059: {
                                key: '',
                                value: '',
                                p: 'D'
                            },
                            aae136: {
                                value: '',
                                p: 'D'
                            },
                            aae133: {
                                value: '',
                                p: 'D'
                            },
                            aae145: {
                                key: '',
                                value: '',
                                p: 'D'
                            },
                            aae006: {
                                value: '',
                                p: 'D'
                            },
                            aae007: {
                                value: '',
                                p: 'D'
                            },
                            yjsq: {
                                value: '',
                                p: 'R'
                            },
                            aae160: {
                                key: '',
                                value: '',
                                p: 'R'
                            },
                            aae041: {
                                value: '',
                                p: 'R'
                            },
                            aac223: {
                                value: '',
                                p: 'R'
                            },
                            aae133: {
                                value: '',
                                p: 'R'
                            },
                            aac059: {
                                key: '',
                                value: '',
                                p: 'R'
                            },
                            aae136: {
                                value: '',
                                p: 'R'
                            },
                            aae145: {
                                key: '',
                                value: '',
                                p: 'R'
                            },
                            aaz065: {
                                key: '',
                                value: '',
                                p: 'R'
                            },
                            aae010: {
                                value: '',
                                p: 'R'
                            },
                            aae009: {
                                value: '',
                                p: 'R'
                            },
                            aaf002: {
                                value: '',
                                p: 'R'
                            },
                            bac049: {
                                value: '',
                                p: 'R'
                            },
                            aae007: {
                                value: '',
                                p: 'R'
                            },
                            aae006: {
                                value: '',
                                p: 'R'
                            },
                            aaa077: {
                                value: '',
                                p: 'D'
                            },
                            bac061: {
                                value: '',
                                p: 'D'
                            },
                            aae042: {
                                value: '',
                                p: 'D'
                            },
                            calmonth: {
                                value: '',
                                p: 'D'
                            },
                            calmoney: {
                                value: '',
                                p: 'D'
                            },

                        };
                        let tableData1= {};
                        let tableData2= {};
                        let tableData3= {};
                        let panel= {};

                        let param = {
                            path: this.$route.path,
                            codeTypes:codeTypes,
                            codeTypeFilters: window.btoa(JSON.stringify(this.codeTypeFilters)),
                            form:form,
                            tableData1:tableData1,
                            tableData2:tableData2,
                            tableData3:tableData3,
                            panel:panel

                        };
                        this.$store.dispatch('SET_INIT', param);
                    }
                }
            }
        },
        mounted() {
            if (this.$store.getters.cacheData === null) return;
            if (this.$store.getters.cacheData[this.$route.path] === undefined)  return;
            if (this.$store.getters.cacheData[this.$route.path].path !== this.$route.path) return;
            if (this.$store.getters.cacheData[this.$route.path].form !== undefined) {
                this.getformData(this.$store.getters.cacheData[this.$route.path].form);
            }
            if (this.$store.getters.cacheData[this.$route.path].tableData1 !== undefined) {
                this.gettableData1(this.$store.getters.cacheData[this.$route.path].tableData1);
            }
            if (this.$store.getters.cacheData[this.$route.path].tableData2 !== undefined) {
                this.gettableData2(this.$store.getters.cacheData[this.$route.path].tableData2);
            }
            if (this.$store.getters.cacheData[this.$route.path].tableData3 !== undefined) {
                this.gettableData3(this.$store.getters.cacheData[this.$route.path].tableData3);
            }
            if (this.$store.getters.cacheData[this.$route.path].panel !== undefined) {
                this.getpanel(this.$store.getters.cacheData[this.$route.path].panel);
            }

        },
        beforeRouteLeave(to, from, next) {
            let param = {
                path: this.$route.path,
                codeTypes: this.$store.getters.codeTypes,
                codeTypeFilters: window.btoa(JSON.stringify(this.codeTypeFilters)),
                form:this.form,
                tableData1:this.tableData1,
                tableData2:this.tableData2,
                tableData3:this.tableData3,
                panel:this.panel

            };
            if (from) {
                this.$store.dispatch('SET_CACHEDATA', param);
            }
            next();
        },
        methods: {
            getpageData(value) {
                this.form = value;
            },
            getformData(value) {
                this.form = value;
            },
            gettableData1(value) {
                this.tableData1 = value;
            },
            gettableData2(value) {
                this.tableData2 = value;
            },
            gettableData3(value) {
                this.tableData3 = value;
            },
            getpanel(value) {
                this.panel = value;
            },


            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleEdit(id) {
                this.dialogFormVisible = true;
            },
            formValidate(value){
                if(value && value.length>0){
                    let btn = true;
                    value.forEach((item,index)=>{
                        if(!btn) return
                        this.$refs[item].validate((valid) => {
                            if (valid) {
                                btn = true;
                            } else {
                                btn = false;
                            }
                        });
                    })
                    if(btn) this.$refs.save.btn();
                }
            },

            customBackFun(){//自定义方法体
            },
        },
    }

</script>
